<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Login</title>

    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="static/js/html5shiv.js"></script>
    <script src="static/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-body">

<div class="container">

    <div class="form-signin">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">登录</h1>
            <img src="static/images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <input type="text" id="username" class="form-control" placeholder="用户身份" autofocus>
            <input type="password" id="password" class="form-control" placeholder="密码">

            <button class="btn btn-lg btn-login btn-block" onclick="login()">
                <i class="fa fa-check"></i>
            </button>
            <div class="margin" align="center" style="color: red">
                <span id="infoSpan"></span>
            </div>
            <div class="registration">
                还不是会员？
                <a data-toggle="modal" class="" href="#registration">
                    注册
                </a>
            </div>
            <label class="checkbox">
                <c:choose>
                    <c:when test="${cookie['USERNAME'].value != ''}">
                        <input type="checkbox" value="" id="rememberMe" checked="checked"> 记住我
                    </c:when>
                    <c:otherwise>
                        <input type="checkbox" value="" id="rememberMe"> 记住我
                    </c:otherwise>
                </c:choose>

                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal" onclick="getPassword()"> 忘记密码？</a>
                </span>
            </label>
        </div>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改密码</h4>
                    </div>
                    <div class="modal-body">
                        <p>请输入您的新密码</p>
                        <input type="password" name="newPassword" id="newPassword" autocomplete="off"
                               class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                        <button class="btn btn-primary" type="button" onclick="updatePassword()">修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

        <!-- Modal2 -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="registration"
             class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">注册</h4>
                    </div>
                    <div class="modal-body">
                        <label class="control-label">用户名</label>
                        <input id="addUsername" type="text" autofocus="" placeholder="请输入用户名" class="form-control">
                        <label class="control-label">用户密码</label>
                        <input id="addPassword" type="text" autofocus="" placeholder="请输入密码" class="form-control">
                        <label class="control-label">用户昵称</label>
                        <input id="addName" type="text" autofocus="" placeholder="请输入昵称" class="form-control">
                        <label class="control-label">角色</label>
                        <select id="roleSelect" class="">
                            <option value="1">教务主任</option>
                            <option value="2">班主任</option>
                            <option value="3">任课老师</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                        <button class="btn btn-primary" type="button" onclick="addOne()">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal2 -->
    </div>
</div>


<!-- Placed js at the end of the document so the pages load faster -->

<!-- Placed js at the end of the document so the pages load faster -->
<script src="static/js/jquery-1.10.2.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/modernizr.min.js"></script>

<script>
    $(function () {
        $("#username").focus(function () {
            $("#username").val("");
            $("#password").val("");
            $("#infoSpan").html("");
        })

        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/user/rememberMe",
            dataType: "json",
            success: function (info) {
                $("#username").val(info.username);
                $("#password").val(info.password);
            },
            error: function () {
                //alert("验证失败");
                layer.msg("验证失败", {icon: 2});
            }
        })
    })

    function login() {
        var usernameValue = $("#username").val();
        var passwordValue = $("#password").val();
        if ($("#rememberMe").prop("checked")) {
            var rememberMeValue = "true";
        } else var rememberMeValue = "false";

        $.ajax({
            url: "${pageContext.request.contextPath}/user/login",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"username": usernameValue, "password": passwordValue, "rememberMe": rememberMeValue},
            dataType: 'json',
            success: function (result) {
                if (result.code == 1) {
                    window.location.href = "${pageContext.request.contextPath}/index.jsp?name="+result.user.name;
                }
                if (result.code == 2) {
                    window.location.href = "${pageContext.request.contextPath}/index2.jsp?name="+result.user.name;
                }
                if (result.code == 3) {
                    window.location.href = "${pageContext.request.contextPath}/index3.jsp?name="+result.user.name;
                }
                $("#infoSpan").html(result.message);
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function getPassword() {
        var usernameValue = $("#username").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/user/getPassword",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"username": usernameValue},
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    $("#newPassword").val(result.user.password);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function updatePassword() {
        var usernameValue = $("#username").val();
        var userNewPasswordValue = $("#newPassword").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/user/updatePassword",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"username": usernameValue, "password": userNewPasswordValue},
            dataType: 'json',
            success: function (result) {
                window.location.href = "${pageContext.request.contextPath}/login.jsp";
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function addOne() {
        var usernameValue = $("#addUsername").val();
        var userPasswordValue = $("#addPassword").val();
        var userNameValue = $("#addName").val();
        var userRoleValue = $("#roleSelect").val();


        $.ajax({
            url: "${pageContext.request.contextPath}/user/addOne",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: {"username": usernameValue, "password": userPasswordValue,"name":userNameValue,"roleString":userRoleValue},
            dataType: 'json',
            success: function (result) {
                window.location.href = "${pageContext.request.contextPath}/login.jsp";
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }
</script>
</body>
</html>